<template>
  <div class="app-container">
    <el-row :gutter="5">
      <el-col :span="4" :xs="24">
        <el-card>
          <sys-user-left-tree @reloadTable="reloadTable"></sys-user-left-tree>
        </el-card>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card>
          <!-- 搜索表单开始 -->
          <el-form :inline="true" size="small" :model="page.params">
          <el-form-item>
            <el-input v-model="page.params.username" placeholder="请输入用户名"/>
          </el-form-item>
            <el-form-item>
            <el-input v-model="page.params.nickName" placeholder="请输入昵称"/>
          </el-form-item>
          <el-form-item prop="status">
            <el-select v-model="page.params.status" placeholder="请选择状态" clearable>
              <el-option v-for="dict in statusOptions" :key="dict.dictValue" :value="dict.dictValue" :label="dict.dictLabel"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="search">查询</el-button>
            <el-button type="warning" icon="el-icon-refresh" size="small" @click="page.params = {}">重置</el-button>
          </el-form-item>
        </el-form>
        </el-card>

        <el-card style="margin-top: 3px">
          <!-- 菜单组开始 -->
          <el-button size="small" type="primary" icon="el-icon-plus" @click="toAdd">添加</el-button>
          <!-- 菜单组结束 -->
          <!-- 数据表格开始 -->
          <div style="margin-top: 3px">
            <el-table
              v-loading="loading"
              :data="UserList"
              border
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="userName"
                label="账号"
                align="center"
              />
              <el-table-column
                prop="nickName"
                label="昵称"
                align="center"
              />
              <el-table-column
                prop="email"
                align="center"
                label="邮箱"
              />
              <el-table-column
                prop="phone"
                align="center"
                label="电话"
              />

              <el-table-column align="center" prop="sex" label="性别">
                <template slot-scope="{row}">
                  <dict-tag :value="row.sex" :data-list="sexOptions"></dict-tag>
                </template>
              </el-table-column>


              <el-table-column
                prop="deptId"
                align="center"
                label="所在部门">
                <template slot-scope="{row}">
                  <div v-for="dept in deptList" v-if="row.deptId==dept.deptId">{{dept.deptName}}</div>
                </template>

              </el-table-column>


              <el-table-column prop="status" align="center"  label="状态">
                <template slot-scope="{row}">
                  <dict-tag :value="row.status" :data-list="statusOptions"></dict-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" fixed="right">
                <template slot-scope="{row}">
                  <el-dropdown class="handle-button">
              <span class="el-dropdown-link">
                <el-link icon="el-icon-s-operation" type="primary">操作<i class="el-icon-arrow-down el-icon--right"/>
                </el-link>
              </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <el-button type="text" @click="toInfo(row)" icon="el-icon-document">详情</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button type="text" @click="toUpdate(row)" v-if="row.userType==1" icon="el-icon-edit">修改</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button type="text" @click="deleteById(row)" v-if="row.userType==1" icon="el-icon-delete">删除</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button type="text" @click="resetPassword(row)" v-if="row.userType==1" icon="el-icon-refresh-left">重置密码</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button type="text" @click="toSelectRole(row)" v-if="row.userType==1" icon="el-icon-edit">分配角色</el-button>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagination"
              :current-page="page.pageNumber"
              :page-sizes="[10,20,30,50]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <!-- 数据表格结束 -->
        </el-card>

      </el-col>
    </el-row>

<!--  详情列表开始  -->
    <el-dialog
      :title="title"
      center
      :visible.sync="infoDialog"
      v-if="infoDialog"
      >
      <sys-user-info :active-obj="activeObj" :status-options="statusOptions"></sys-user-info>
    </el-dialog>
<!--  详情列表结束  -->


<!--    添加弹窗开始-->
    <el-dialog
      :title="title"
      center
      :visible.sync="AddDialog"
      v-if="AddDialog"
    >
      <sys-user-add @close="closeDialog" @after="getPage"  :dept-options="deptList" :status-options="statusOptions" :sex-options="sexOptions"/>
    </el-dialog>
<!--    添加弹窗结束-->


<!--    修改弹窗开始-->
    <el-dialog
      :title="title"
      center
      :visible.sync="UpdateDialog"
      v-if="UpdateDialog"
    >
      <sys-user-update></sys-user-update>
    </el-dialog>
<!--    修改弹窗结束-->


<!--    分配角色弹窗开始-->
    <el-dialog
    :title="title"
    center
    :visible.sync="MenuDialog"
    v-if="MenuDialog"
  >
      <sys-user-menu @close="closeDialog"  :active-obj="activeObj" />
  </el-dialog>

<!--    分配角色弹窗结束-->
  </div>
</template>

<script>
import SysUserLeftTree from "./sys-user-left-tree"
import deptApi from "@/api/system/sysDictDept"
import sysUserApi from "@/api/system/sysUserApi"
import SysUserInfo from "./sys-user-info"
import SysUserAdd from "./sys-user-add"
import SysUserUpdate from "./sys-user-update"
import SysUserMenu from "./sys-user-select-menu"
export default {
  name: "sys-user-list",
  components:{
    SysUserLeftTree,
    SysUserInfo,
    SysUserMenu,
    SysUserAdd,
    SysUserUpdate
  },
  created() {
    this.getDataByType("sys_status_type").then(res=>{
      this.statusOptions=res.data
    })
    this.getDataByType("sys_user_sex").then(res => {
      this.sexOptions = res.data;
    })
    this.getPage()
  },
  data(){
    return{
      page:{
        params:{
          username:undefined,
          nickName:undefined,
          status:undefined,
          sex:undefined
        },
        pageNumber:1,
        pageSize:10,
      },
      //性别
      sexOptions:[],
      //表单数据
      UserList:[],
      //状态数据集合
      statusOptions:[],
      //加载
      loading:false,
      //总数
      totalCount:0,
      //所有部门
      deptList:[],
      //详情标签名
      title:undefined,
      //是否打开详情弹出层
      infoDialog:false,
      //详情内容
      activeObj:undefined
      ,//添加弹窗打开与关闭
      AddDialog:false,
      //修改弹窗打开与关闭
      UpdateDialog:false,
      //分配权限弹窗打开与关闭
      MenuDialog:false
    }
  },
  methods:{
    reloadTable(deptId){
      this.page.params.deptId=deptId
      this.getPage()
    },
    //分页查询
    getPage(){
      this.loading = true
      sysUserApi.getByPage(this.page).then(res => {
        this.UserList = res.data.list
        this.totalCount = res.data.totalCount
        this.loading = false
      })
      deptApi.listDept().then(res=>{
        this.deptList=res.data
      })
    },
    //查询所有
    search(){
      this.getPage()
    },
    //添加用户数据
    toAdd(){
      this.AddDialog=true
    },
    //详情弹出层
    toInfo(row){
      this.infoDialog=true
      this.title=`${row.nickName}的详情数据`
      this.activeObj=row
    },
    //修改用户数据
    toUpdate(row){
      this.UpdateDialog=true
    },
    //删除用户数据
    deleteById(row){
      this.$confirm('此操作会删除【' + row.nickName + '】该用户数据，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        sysUserApi.deleteById(row.userId).then(res => {
          this.$message.success(res.msg)
          // 右边表格的数据重新查询
          this.getPage()
        })
      }).catch(() => {
      })
    },
    //重置密码
    resetPassword(row){
      this.$confirm('此操作会重置【' + row.nickName + '】该用户密码，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        sysUserApi.resetPwd(row.userId).then(res => {
          this.$message.success("重置密码成功")
        })
      }).catch(() => {
      })
    },
    //分配角色
    toSelectRole(row){
      this.MenuDialog=true
      this.activeObj=row;
    },
    // 每页条数变更时触发
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getPage()
    },
    // 当前页变更时触发
    handleCurrentChange(val) {
      this.page.pageNumber = val
      this.getPage()
    },
    //关闭弹出层
    closeDialog(){
      this.AddDialog=false
      this.MenuDialog=false
    }
  }
}
</script>

<style scoped>

</style>
